<template>
    <div>
        <div class="indexsong" @click="fasong(myid,myindex)">
            <div class="listsongfont">
                <div class="listsongtop">
                    {{myname}}
                </div>
                <div class="listsongdown">
                    {{mypeople}}
                </div>
            </div>
        </div>
        <span class="listdian" @click="showPopup(myid)">...</span>

        <van-popup v-model="show" position="bottom" round :style="{ height: '70%' }" get-container="#app">
            <div class="gqlb" v-show="!jiz">
                <div class="gqtop">
                    <div class="gqleft">
                        <img v-lazy="mytp" alt="">
                    </div>
                    <div class="gqright">
                        <div class="gqname">
                            <p :style="{paddingTop:namechang}" ref='mg'>
                                {{myname}}
                            </p>
                        </div>
                        <div class="gqpeople">
                            <p class="ren">
                                {{mypeople}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="hx"></div>
                <ul class="gqul">
                    <li @click="addnex">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bofang1"></use>
                        </svg>
                        <span>下一首播放</span>
                    </li>
                    <li @click="shoucang">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shoucang"></use>
                        </svg>
                        <span>收藏到歌单</span>
                    </li>
                    <li @click="pinlun(myid)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiaoxi"></use>
                        </svg>
                        <span>评论({{pls==0?'...':pls}})</span>
                    </li>
                    <li @click="geshou">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-touting"></use>
                        </svg>
                        <p>歌手:{{mypeople}}</p>
                    </li>
                    <li @click="zhuanji">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yinle"></use>
                        </svg>
                        <p>专辑: {{zj}}</p>
                    </li>
                    <li @click="xiazai">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiazai"></use>
                        </svg>
                        <span>下载</span>
                    </li>
                    <li  @click="fenxiang" >
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fabu"></use>
                        </svg>
                        <span>分享</span>
                    </li>
                </ul>
            </div>
            <loading v-show="jiz"></loading>
        </van-popup>
        <!-- 分享 -->
        <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            />
        <!-- 歌手选择 -->
        <van-popup v-model="showgeshou" round  get-container="#app" :style="{ width: '70%' ,overflow:'hidden'}">
            <ul class="gslb">
                <li class="xzgs">
                    请选择要查看的歌手
                </li>
                <li class="gs" v-for="item in singarr" :key="item.id" @click="gogeshou(item.id)">
                    <p>{{item.name}}</p>
                </li>    
            </ul>    
        </van-popup>  
    </div>
</template>
<script>
import { Toast } from 'vant';
import loading from "./loading.vue"
export default {
    name:"listone",
    props:['myid','myindex','mypeople','myname','zongid'],
    data(){
        return {
            show: false,
            showgeshou: false,
            namechang:0,

            showShare: false,
            options: [
                { name: '复制链接', icon: 'link' },
            ],

            jiz:true,
            jzsz:0,

            zj:'...',
            zjid:0,
            pls:0,
            mytp:'',
            singarr:[]
        }
    },
    components:{
        loading
    },
    methods:{
        gaigao(){
            if(this.$refs.mg.offsetHeight > 40){
                this.namechang = "0px"
            }else{
                this.namechang = "8px"
            }
        },
        fasong(id,index){
            this.pushlist1()
            this.$store.commit("changesongid",id)
            // this.$store.commit("changesongstate",true)
            this.$store.commit("changelistwhich",index)
            this.$store.commit("changelistwhat",0)
            this.$store.commit("pushlist2",{id:id,name:this.myname})
            this.$router.push({path:'/songdetails'})
        },
        pushlist1() {
            axios.get(`https://apis.netstart.cn/music/playlist/detail?id=${this.zongid}`).then(
                res => {
                    // console.log(res)
                    let arr = res.data.playlist.trackIds
                    let str = ''
                    for (let i = 0; i < arr.length; i++) {
                        if (i == 0) {
                            str += arr[i].id
                        } else {
                            str += "," + arr[i].id
                        }
                    }
                    axios.get(`https://apis.netstart.cn/music/song/detail?ids=${str}`).then(
                        res => {
                            // console.log("from index.js", res)
                            let addarr = res.data.songs
                            let newarr = []
                            for (let j = 0; j < addarr.length; j++) {
                                let obj = {}
                                obj.name = addarr[j].name
                                obj.id = addarr[j].id
                                newarr.push(obj)
                            }
                            this.$store.dispatch("setlist1", newarr);
                        },
                        err => {

                        }
                    )
                },
                err => {
                    console.log(err)
                }
            )
        },
        showPopup(){
            this.show = true;
            this.singarr = []
            // 评论
            axios.get(`https://apis.netstart.cn/music/comment/music?id=${this.myid}&limit=1`).then(
                res=>{
                    // console.log(res)
                    this.pls = res.data.total
                    this.gaigao()
                    this.pdjz()
                },
                err=>{
                    console.log(err)
                }
            ).then(
                axios.get(`https://apis.netstart.cn/music/song/detail?ids=${this.myid}`).then(
                    res=>{
                        // console.log(res)
                        this.zj = res.data.songs[0].al.name
                        this.zjid = res.data.songs[0].al.id
                        this.mytp = res.data.songs[0].al.picUrl
                        let sarr = res.data.songs[0].ar
                        for(let i = 0;i<sarr.length;i++){
                            let obj = {}
                            obj.name = sarr[i].name
                            obj.id = sarr[i].id
                            this.singarr.push(obj)
                        } 
                        this.pdjz()
                    },
                    err=>{
                        console.log(err)
                    }
                )
            )
        },
        pdjz(){
            this.jzsz += 1
            if(this.jzsz == 2){
                this.jiz = false
            }
        },
        // 下一首播放
        addnex(){
            Toast("添加成功");
            let obj = {
                id:this.myid,
                name:this.myname
            }
            let gaiarr = []
            // 如果是当前歌单的话
            if(this.$store.state.listwhat == 0){
                for(let i = 0;i<this.$store.state.list1.length;i++){
                    if(i == this.$store.state.listwhich + 1){
                        gaiarr.push(obj)
                    }
                    if(obj.id == this.$store.state.list1[i].id){

                    }else{
                        gaiarr.push(this.$store.state.list1[i])
                    }
                }
                this.$store.commit("changelist1",gaiarr)
            }else{
                for(let i = 0;i<this.$store.state.list2.length;i++){
                    if(i == this.$store.state.listwhich + 1){
                        gaiarr.push(obj)
                    }
                    gaiarr.push(this.$store.state.list2[i])
                }
                this.$store.commit("changelist2",gaiarr)
            }
            this.show = false;
        },
        // 收藏到歌单
        shoucang(){

        },
        // 评论
        pinlun(id){
            this.$router.push({path:"/comment",query:{id:id}})
        },
        // 歌手
        geshou(){
            // 如果只有一个歌手的话，就直接跳转页面
            if(this.singarr.length == 1){
                this.gogeshou(this.singarr[0].id)
            }else{
                // 如果有多个歌手的话，就要进行选择之后再跳歌手页
                this.show = false;
                this.showgeshou = true;
            }
        },
        // 去歌手页
        gogeshou(gsid){
            this.$router.push({path:"/singer",query:{id:gsid}})
        },
        // 专辑
        zhuanji(){
            // console.log(this.zjid)
            this.$router.push({path:'/album',query:{id:this.zjid}})
        },
        // 下载
        xiazai(){
            // /song/download/url
            // axios.get(`https://apis.netstart.cn/music/song/download/url?id=${this.myid}`).then(
            //     res=>{
            //         console.log(123)
            //     },
            //     err=>{
            //         console.log(err)
            //     }
            // )
            // console.log(`https://apis.netstart.cn/music/song/url?id=${this.myid}`)
            Toast("下载成功");
            this.show = false;
        },
        // 分享
        fenxiang(){
            this.show = false;
            this.showShare = true
        },
        onSelect() {
            Toast("已复制到剪切板");
            this.fuzhi()
            this.showShare = false;
        },
        // 复制文本
        fuzhi() {
            let str = `分享${this.mypeople}的单曲《${this.myname}》: https://y.music.163.com/m/song?id=${this.myid} (来自@泠泠音乐)`
            var input = document.createElement("input");   // js创建一个input输入框
            input.value = str;  // 将需要复制的文本赋值到创建的input输入框中
            document.body.appendChild(input);    // 将输入框暂时创建到实例里面
            input.select();   // 选中输入框中的内容
            document.execCommand("Copy");   // 执行复制操作
            document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
        }
    }
}
</script>
<style lang="less" scoped>
.listsongfont{
    width: 70%;
    .listsongtop{
        margin-top: 10px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #838383;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .listsongdown{
        font-size: 0.9rem;
        color: #838383ab;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.listdian{
    position: absolute;
    top: 50%;
    right:10%;
    top: 40%;
    font-size: 2rem;
    transform: translateY(-50%);
}
.indexsong{
    display: flex;
    width: 100%;
    // justify-content: space-between;
    position: relative;
}
.songimg{
        width: 20%;
        overflow: hidden;
        border-radius: 5px;
        font-size: 0px;
        margin-right: 15px;
        flex-shrink: 0;
        img{
            width: 100%;
        }
    }
    .songfont{
        width: 70%;
        flex-shrink: 0;
        .songtop{
            margin-top: 10px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #838383;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .songdown{
            font-size: 0.9rem;
            color: #838383ab;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .songdian{
        display: inline-block;
        font-size: 2rem;
        // position: absolute;
        // top: 0%;
        color: #838383;
        // right: -1%;
    }
    .gqlb{
        width:100%;
        height:100%;
        .gqtop{
            width:90%;
            margin:0 auto;
            // height:20%;
            // background: red;
            padding-top: 4.5%;
            padding-bottom: 4.5%;
            display:flex;
            .gqleft{
                width: 20%;
                font-size: 0px;
                img{
                    border-radius: 10px;
                    overflow: hidden;
                    width:100%;
                }
            }
            .gqright{
                width: 70%;
                margin-left:15px;
                p{
                    font-size: 19px;
                    margin: 0;
                    word-wrap: break-word;
                    word-break: normal;
                    box-sizing: border-box;
                    // padding-top:8px;
                    margin-bottom: 5px;
                }
                span{
                    color:#838383;
                    font-size: 13px;
                }
            }
        }
        .hx{
            // border-bottom: 1px solid #ccc;
            width:100%;
            height:0.5px;
            background: #eee;
        }
    }
    .gqul{
        width:90%;
        margin:0 auto;
        li{
            padding-top:17px;
            padding-bottom: 5px;
            font-size: 18px;
            overflow: hidden;
            display:flex;
            p{
                // flex-basis: 0;
                margin: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            svg{
                flex-shrink: 0;
                font-size: 25px;
                margin-right:10px;
            }
        }
    }
    .ren{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color:#838383;
        font-size: 13px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .gslb{
        padding:20px;
        // padding-top
        width:70%;
        .gs{
            height:30px;
        }
        p{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top:10px;
        }
        .xzgs{
            margin-top:5px;
            font-weight: bolder;
            padding-bottom: 10px;
            font-size:18px;
        }
    }
</style>